<template>
	<u-popup :show="showLogin" :closeOnClickOverlay="!force" :zIndex="10075" :safeAreaInsetBottom="false" @close="handleClose" :closeable="!force" round="20rpx" mode="center">
		<view class="login-pop">
			<view v-if="registered" class="login-wrapper">
				<view class="login-desc">
					為了給您提供更好的服務，請登錄柏圖教育！
				</view>
				<view class="action-box">
					<u-button type="success" shape="circle" text="一鍵登錄" @click="handleLogin"></u-button>
					<u-button v-if="!force" type="primary" shape="circle" plain text="我只是看看" @click="handleClose"></u-button>
				</view>
			</view>
			<view v-else class="reg-wrapper">
				<view class="title">獲取您的暱稱、頭像</view>
				<view class="sub-title">
					獲取用戶頭像、暱稱，主要用於向用戶提供具有辨識度的用戶中心界面
				</view>
				<view class="avatar-box">
					<view class="button-shadow">
						<button class="button" open-type="chooseAvatar" @chooseavatar="chooseAvatar">
							<image v-if="formParams.photo" class="avatar-image" :src="formParams.photo" mode="aspectFill"></image>
							<view v-else class="avatar-empty">
								<image :src="$getOSSImg('default_avatar.png')" mode="aspectFill" />
							</view>
							<view class="avatar-icon flex-center">
							  <u-icon name="camera-fill" color="#fff" size="20"></u-icon>
							</view>
						</button>
					</view>
				</view>
				<view class="nickname-box">
					<view class="nickname">
						<input
							v-model="formParams.nickname"
							type="nickname"
							class="input"
							placeholder="請輸入暱稱"
							placeholder-style="color: #AAAAAA;"
							@change="handleNickname"
						/>
					</view>
				</view>
				<view class="submit-btn">
					<u-button
						type="success"
						text="保 存"
						:customStyle="{
							height: '88rpx'
						}"
						@click="handleReg"
					/>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	import { registerUser, loginWxopenid, getCodeSession } from '@/api/login'
	import { BASE_API } from '@/utils/config'
	import { setToken } from '@/utils/auth'
	export default {
		props: {
			// 必須登錄
			force: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				registered: true,
				formParams: {
				  photo: '',
				  nickname: ''
				}
			}
		},
		methods: {
			handleClose() {
				this.$store.commit('CHANGE_SETTING', {
					showLogin: false
				})
			},
			async handleLogin() {
				let openId = uni.getStorageSync('openId')
				uni.showLoading({
					title: '登錄中'
				})
				if (!openId) {
					const code = await this.$store.dispatch('getWxCode')
					const { data } = await getCodeSession({ code })
					uni.setStorageSync('openId', data.openid)
					openId = data.openid
				}
				const isLogin = await this.$store.dispatch('login', openId)
				if (isLogin) {
					this.handleClose()
					this.$emit('update')
				} else {
					this.registered = false
				}
			},
			chooseAvatar(e) {
				const { avatarUrl } = e.detail
				uni.uploadFile({
					url: `${ BASE_API }/Common/UploadFile`,
					filePath: avatarUrl,
					storeType: 1,
					name: 'file',
					success: (res) => {
						if (res.data) {
							const { data } = JSON.parse(res.data)
							this.formParams.photo = data.url
						}
					}
				})
			},
			handleNickname(e) {
				this.formParams.nickname = e.detail.value
			},
			async handleReg() {
				if (!this.formParams.photo) {
					this.$Message.warns('請上傳頭像')
					return
				}
				if (!this.formParams.nickname) {
					this.$Message.warns('請輸入暱稱')
					return
				}	
				const { data } = await registerUser({
					wxopenid: uni.getStorageSync('openId'),
					...this.formParams
				})
				setToken(`Bearer ${data.token}`)
				this.$store.commit('CHANGE_SETTING', {
					showLogin: false,
					isLogin: true
				})
				setTimeout(() => {
					this.$store.dispatch('updateUserInfo')
					this.$emit('update')
				}, 500)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login-pop {
		width: 660rpx;
		padding: 40rpx;
		box-sizing: border-box;
		.login-wrapper {
			padding: 20rpx 60rpx;
			.login-desc {
				text-align: center;
				color: #666;
				font-size: 30rpx;
				line-height: 44rpx;
				padding: 40rpx 0 50rpx;
			}
			
			.action-box {
				/deep/ button {
					margin-top: 30rpx;
				}
			}
		}
		.reg-wrapper {
			.title {
			  font-size: 34rpx;
			}
			.sub-title {
			  font-size: 26rpx;
			  color: #AAAAAA;
			  margin-top: 16rpx;
			  padding-bottom: 30rpx;
			}
			.avatar-box {
			  width: 100%;
			  margin-top: 30rpx;
			  display: flex;
			  align-items: center;
			  justify-content: center;
			  
			  .button-shadow {
			    border: 8rpx solid rgba(255,255,255,0.05);
			    box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
			    border-radius: 50%;
			  }
			  
			  .button {
			    position: relative;
			    width: 160rpx;
			    height: 160rpx;
			    border-radius: 50%;
			    overflow: visible;
			    background-image: repeating-linear-gradient(45deg, #E4E9EC, #F8F7F8);
			    color: #FFFFFF;
			    background-color: transparent;
			    padding: 0;
			    margin: 0;
			    font-size: inherit;
			    line-height: inherit;
			    border: none;
			    &::after {
			      border: none;
			    }
			  }
				.avatar-image, .avatar-empty {
					width: 100%;
					height: 100%;
					border-radius: 50%;
					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}
				.avatar-icon {
					position: absolute;
					right: -10rpx;
					bottom: -6rpx;
					width: 60rpx;
					height: 60rpx;
					background-color: #1D2541;
					color: #FFFFFF;
					border-radius: 50%;
					border: 6rpx solid #FFFFFF;
					line-height: 1;
					font-size: 36rpx;
				}
			}
			.nickname-box {
			  margin: 40rpx 0 30rpx;
				.nickname {
					width: 100%;
					padding: 26rpx 20rpx;
					border-radius: 10rpx;
					background-color: #F8F7F8;
					box-sizing: border-box;
					input {
						color: #080808;
					}
				}
			}
			.submit-btn {
				button {
					text {
						font-size: 32rpx;
					}
				}
			}
		}
	}
</style>